import React, {
	Component,
	PropTypes
} from 'react'

class LoginWindow extends Component {
	constructor(props) {
		super(props)
		this.state = {
			nameValue: "",
			pwValue: ""
		}
	}
	handleNameChange(e) {
		this.setState({
			nameValue: e.target.value
		})
	}
	handlePwChange(e) {
		this.setState({
			pwValue: e.target.value
		})
	}
	render() {
		const {
			handleConfirmClick,
			handleCancelClick,
			isToggle
		} = this.props
		const toggleClass = isToggle ? {
			display: "block"
		} : {
			display: "none"
		}

		return (
			<div style={toggleClass}>
				<div className="dialog-mark"></div>
				<div className="dialog-box">
					<form className="dialog paper">
						<div className="dialog-content">
							<p className="mt0 mb4 ta-c"><strong>LOGIN</strong></p>
							<div className="input pt8">
					            <label htmlFor="userNameInput" className="fs12 c-grey">Email:</label>
					            <br/>
					            <input onChange={this.handleNameChange.bind(this)} id="userNameInput" type="text" className="input-down" placeholder="Input your email" maxLength="24" autoFocus required/>
					        </div>
					        <br/>
					        <div className="input pt8">
					            <label htmlFor="userPwInput" className="fs12 c-grey">Password:</label>
					            <br/>
					            <input onChange={this.handlePwChange.bind(this)} id="userPwInput" type="password" className="input-down" placeholder="Input your pw" maxLength="24" required/>
					        </div>
						</div>
						<div className="ta-c pb8">
							<button type="button" className="btn btn-s btn-tp c-blue mr8" onClick={handleConfirmClick.bind(this,this.state.nameValue,this.state.pwValue)}>确认</button>
							<button type="button" className="btn btn-s btn-tp c-blue" onClick={handleCancelClick.bind(this)}>关闭</button>
						</div>
					</form>
				</div>
			</div>
		)
	}
}

LoginWindow.defaultProps = {
	isToggle: true
}

export default LoginWindow